<template>
	<div class="lianghao">
		<top></top>
		<div class="center">
			<left></left>
			<div class="right" v-loading="loading">
				<div class="flex" style="background: #F9F9F9; position: relative;">
					<!-- <div style="position: absolute; right: 20px; top: 20px; color: #f00; font-weight: bold;">返回{{moban.platform_name}}系统
					</div> -->
					<div @click="go('/lianghaodingdan')"
						style="width: 180px; background: #F9F9F9; border-top: 3px #F9F9F9 solid; line-height: 50px; text-align: center; cursor: pointer; font-weight: bold;">
						靓号订单</div>
					<div
						style="width: 180px; background: #FFFFFF; border-top: 3px #F00 solid; line-height: 50px; text-align: center; cursor: pointer; font-weight: bold;">
						优惠专区</div>
				</div>
				<div style="background: #EFEFEF; height: 20px; width: 100%;"></div>
				<div class="add flex" style="flex-wrap: wrap;">
					<el-input v-model="all.number" style="width: 160px; margin-right: 10px; " placeholder="号码">
					</el-input>
					<el-input v-model="all.province" style="width: 160px; margin-right: 10px; " placeholder="归属地省">
					</el-input>
					<el-input v-model="all.city" style="width: 160px; margin-right: 10px; " placeholder="归属地市">
					</el-input>
					<el-input v-model="all.operator" style="width: 160px; margin-right: 10px; " placeholder="运营商">
					</el-input>
					<el-input v-model="all.brand" style="width: 160px; margin-right: 10px; " placeholder="卡品牌">
					</el-input>
					<el-select v-model="all.saled" style="width: 160px; margin-right: 10px;" filterable clearable placeholder="销售状态">
						<el-option label="正常" value="0"></el-option>
						<el-option label="已售" value="1"></el-option>
						<el-option label="预占" value="-1"></el-option>
					</el-select>
				</div>
				<div class="add flex" style="flex-wrap: wrap; margin-top: 0; padding-top: 0;">

					<el-button type="primary" size="small" @click="search" style="margin-right: 50px;">搜索</el-button>
          <el-button type="primary" size="small"  @click="piliangbugaijia()">批量取消改价</el-button>
				</div>
				<div class="con" style="margin-top: 20px;">
					<el-table :data="tableData" style="text-align: center;" align="center" border :loading="loading" @selection-change="handleSelectionChange">
            <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
						<!-- <el-table-column label="ID" >
							<template slot-scope="scope">
								<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column> -->
						<el-table-column label="号码">
							<template slot-scope="scope">
								<span>{{ scope.row.number }}</span>
							</template>
						</el-table-column>

						<el-table-column label="运营商">
							<template slot-scope="scope">
								<span>{{ scope.row.operator }}</span>
							</template>
						</el-table-column>
						<el-table-column label="卡品牌">
							<template slot-scope="scope">
								<span>{{ scope.row.brand }}</span>
							</template>
						</el-table-column>
						<el-table-column label="指导价" >
							<template slot-scope="scope">
								<span>{{ scope.row.guiding_price }}</span>
							</template>
						</el-table-column>
						<el-table-column label="现价" >
							<template slot-scope="scope">
								<span>{{ scope.row.seller_price }}</span>
							</template>
						</el-table-column>
						<el-table-column label="销售底价">
							<template slot-scope="scope">
								<span>{{ scope.row.sale_price }}</span>
							</template>
						</el-table-column>
						<el-table-column label="置顶">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.top == 1 ? true : false" @change="kaiguan(scope.row.id,scope.row.top)" active-color="#13ce66"
								 inactive-color="#ff4949"></el-switch>
							</template>
						</el-table-column>


						<el-table-column label="申请时间">
							<template slot-scope="scope">
								<span>{{ scope.row.created_at}}</span>
							</template>
						</el-table-column>
						<el-table-column label="改价时间">
							<template slot-scope="scope">
								<span>{{ scope.row.deal_at }}</span>
							</template>
						</el-table-column>
						<el-table-column label="改价到期时间">
							<template slot-scope="scope">
								<span>{{ scope.row.sell_before }}</span>
							</template>
						</el-table-column>


						<el-table-column label="操作">
							<template slot-scope="scope">
								<!-- <el-button type="primary" size="mini" v-if="scope.row.deal_at == '0000-00-00 00:00:00'" @click="gaijia(scope.row.apply_id)">改价</el-button>
								<div style="text-align: center; font-size: 14px;" v-if="scope.row.deal_at != '0000-00-00 00:00:00'" >已改过</div> -->
<el-button type="primary" size="mini" v-if="scope.row.deal_at != '0000-00-00 00:00:00'" @click="bugaijia(scope.row.id)">取消改价</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination background layout="total,prev, pager, next" :current-page="all.page"
						@current-change="fanye" :page-size="all.pagesize" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<el-dialog title="上传表单" :visible.sync="log" width="440px">
			<div class="flex" style="line-height: 32px;">
				<div>选择文件：</div>
				<div>
					<upload-excel-component @on-selected-file="exportData" class="btnp" :buttonName="name3">
					</upload-excel-component>
				</div>
			</div>
			<div class="flex" style="line-height: 32px;">
				<div>选择月份：</div>
				<div>
					<el-date-picker v-model="time1" value-format="yyyy-MM" type="month" size="small" placeholder="选择月份">
					</el-date-picker>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取消</el-button>
				<el-button type="primary" @click="shangchuan" :loading="shangchuanzhong">上传</el-button>
			</span>
		</el-dialog>
		<!-- <foot></foot>
		<notice></notice> -->
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	import notice from '@/components/notice.vue'
	import moment from "moment";
	import UploadExcelComponent from "@/components/UploadExcel/index.vue";
	export default {
		components: {
			left,
			top,
			foot,
			notice,
			UploadExcelComponent
		},
		name: 'lianghao',
		data() {
			return {
				all: {
					pagesize: 20,
					page: 1,
					province: "",
					city: "",
					operator: "",
					brand: "",
					sku: "",
					number: "",
					saled:""
				},
				tableData: "",
				name1: "导入号码",
				name2: "导入直播订单表",
				name3: "",
				msg: "hello",
				loading: false,
				log: false,
				disid: "",
				result: "",
				list: "",
				total: 0,

				time: "",
				time1: "",
				url: "",
				shangchuanshuju: "",
				shangchuanleibie: 0,
				shangchuanzhong: false,

        ids:[]
			}
		},
		created() {

			this.time = moment().format("YYYY-MM");
			this.time1 = moment().format("YYYY-MM");
			this.getlist();

		},

		methods: {
      handleSelectionChange:function(val){
        if(val){
          this.ids = []
          val.forEach(item=>{
            this.ids.push(item.id)
          })

        }
      },
      piliangbugaijia:function(){
        axios.post('/api/plan-market/great/number/out',{ids:this.ids})
        	.then(response => {
        		if(response.data.msg.code == 0){
        			this.$message.success('已取消改价');
        			this.getlist()
        		}else{
        			this.$message.error(response.data.msg.info);
        		}
        	})
      },
      bugaijia:function(id){
      	this.$confirm('此操作将取消改价, 是否继续?', '提示', {
      	          confirmButtonText: '确定',
      	          cancelButtonText: '取消',
      	          type: 'warning'
      	        }).then(() => {
      		axios.post('/api/plan-market/great/number/out',{ids:[id]})
      			.then(response => {
      				if(response.data.msg.code == 0){
      					this.$message.success('已取消改价');
      					this.getlist()
      				}else{
      					this.$message.error(response.data.msg.info);
      				}
      			})
      	})

      },

      search:function(){
      	this.all.page = 1
      	this.getlist()
      },
			kaiguan:function(id,top){
				this.loading = true
				let tops = 0
				if(top == 0){
					tops = 1
				}else{
					tops = 0
				}

				axios.post('/api/plan-market/great/number/make',{id:id,top:tops})
					.then(response => {
						if (response.data.msg.code == 0) {
							this.$message.success("已修改置顶");
							this.getlist()
						} else {
							this.$message.error(response.data.msg.info);
						}

					})
			},
			go:function(url){
				this.$router.push(url)
			},
			gaijia: function(id) {
				this.$prompt('请输入要改的价格', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				}).then(({ value }) => {
				  axios.post('/api/plan-market/great/price/change',{id:id,price:value})
				  	.then(response => {
				  		if (response.data.msg.code == 0) {
				  			this.$message.success("已改价");
				  			this.getlist()
				  		} else {
				  			this.$message.error(response.data.msg.info);
				  		}

				  	})
				})
			},
			shanchu2: function() {
				var that = this;
				axios.post('/api/tool/broadorders/delete')
					.then(response => {
						this.getlist()
					})
			},
			daoru1: function() {
				this.name3 = '导入值班数据'
				this.shangchuanleibie = 1
				this.log = true
			},
			daoru2: function() {
				this.name3 = '导入直播订单表'
				this.shangchuanleibie = 2
				this.log = true
			},
			changetime: function() {
				this.getlist()
			},
			xiazai1: function() {
				const a = document.createElement('a');
				a.setAttribute('download', '靓号导入模板.xlsx');
				a.setAttribute('href', this.allurl + 'static/moban/lianghao.xlsx');
				a.click();
			},
			xiazai2: function() {
				const a = document.createElement('a');
				a.setAttribute('download', '靓号导入下架模板.xlsx');
				a.setAttribute('href', this.allurl + 'static/moban/lianghao2.xlsx');
				a.click();
			},
			xiazai3: function(name) {
				var that = this
				axios.get("/api/tool/broadorders/export?name=" + name + "&month=" + this.time)
					.then(function(response) {
						if (response.data.msg.code == 0) {
							window.location.href = window.location.origin + '/' + response.data.data
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			exportData: function(data) {
				var that = this;
				var list = []
				//导入
				if (data.header[0] == "靓号号码") {
					for (let m in data.results) {
						let obj = {}
						if (data.results[m]['靓号号码']) {
							obj['number'] = (data.results[m]['靓号号码']).toString().trim()
						}
						if (data.results[m]['归属地省']) {
							obj['province'] = data.results[m]['归属地省'].toString().trim()
						}
						if (data.results[m]['归属地市']) {
							obj['city'] = data.results[m]['归属地市'].toString().trim()
						}
						if (data.results[m]['运营商']) {
							obj['operator'] = data.results[m]['运营商'].toString().trim()
						}
						if (data.results[m]['供应商']) {
							obj['supplier'] = data.results[m]['供应商'].toString().trim()
						}
						if (data.results[m]['卡品牌']) {
							obj['brand'] = data.results[m]['卡品牌'].toString().trim()
						}
						if (data.results[m]['产品编码']) {
							obj['sku'] = data.results[m]['产品编码'].toString().trim()
						}
						if (data.results[m]['指导价']) {
							obj['guiding_price'] = data.results[m]['指导价'].toString().trim()
						}
						if (data.results[m]['销售底价']) {
							obj['sale_price'] = data.results[m]['销售底价'].toString().trim()
						}
						if (data.results[m]['进货价']) {
							obj['base_price'] = data.results[m]['进货价'].toString().trim()
						}
						if (data.results[m]['预存话费']) {
							obj['prepaid'] = data.results[m]['预存话费'].toString().trim()
						}
						if (data.results[m]['最低消费']) {
							obj['min_consume'] = data.results[m]['最低消费'].toString().trim()
						}
						if (data.results[m]['卡含话费']) {
							obj['credit'] = data.results[m]['卡含话费'].toString().trim()
						}
						if (data.results[m]['备注']) {
							obj['remark'] = data.results[m]['备注'].toString().trim()
						}
						if (data.results[m]['套餐']) {
							obj['package'] = data.results[m]['套餐'].toString().trim()
						}

						list.push(obj)
					}
					console.log(list)

					axios.post("/api/plan-market/great/numbers/import", {
							data: list
						})
						.then((response) => {
							if (response.data.msg.code == 0) {
								this.getlist()
							} else {
								this.$message.error(response.data.msg.info);
							}
						})
				}


				// if (data.header[0] == "外部订单号") {
				// 	console.log(data)
				// 	for (var i = 0; i < data.results.length; i++) {
				// 		list.push(data.results[i]['外部订单号'])
				// 	}
				// 	this.shangchuanshuju = list
				// }

			},
			shangchuan: function() {
				var that = this
				if (this.shangchuanshuju == "") {
					this.$message.error('先上传数据');
					return false
				}
				this.shangchuanzhong = true

				if (this.shangchuanleibie == 1) {
					axios.post("/api/tool/broadtable/import", {
							month: this.time1,
							data: this.shangchuanshuju
						})
						.then(function(response) {
							if (response.data.msg.code == 0) {
								if (response.data.data.errors != "") {
									var cuowu = ""
									for (var i in response.data.data.errors) {
										cuowu = cuowu + response.data.data.errors[i]
									}
									that.$message.error(cuowu);
								} else {
									that.$message.success("导入成功");
								}
								that.shangchuanzhong = false
								that.log = false
								that.getlist()
							} else {
								that.$message.error(response.data.msg.info);
								that.shangchuanzhong = false
							}
						})
				}
				if (this.shangchuanleibie == 2) {
					axios.post("/api/tool/broadorders/import", {
							month: this.time1,
							data: this.shangchuanshuju
						})
						.then(function(response) {
							if (response.data.msg.code == 0) {
								if (response.data.data.errors != "") {
									var cuowu = ""
									for (var i in response.data.data.errors) {
										cuowu = cuowu + response.data.data.errors[i]
									}
									that.$message.error(cuowu);
								} else {
									that.$message.success("导入成功");
								}
								that.shangchuanzhong = false
								that.log = false
								that.getlist()
							} else {
								that.$message.error(response.data.msg.info);
								that.shangchuanzhong = false
							}
						})
				}
				this.getlist();

			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.all.page = page
				this.getlist()
			},

			//获取
			getlist: function() {
				this.loading = true
				axios.get('/api/plan-market/great/numbers?gai=1')
					.then(response => {
						this.total = response.data.data.total
						this.tableData = response.data.data.data
						this.loading = false
					})
			},

		}
	}
</script>
<style>
	.zhibo .el-button--primary {
		color: #FFF !important;
		background-color: #409EFF !important;
		border-color: #409EFF !important;
	}

	.zhibo .el-input__inner {
		line-height: 32px !important;
		height: 32px !important;
	}

	.zhibo .btnp {
		line-height: 32px !important;
		height: 32px !important;
		margin-bottom: 20px;
	}
</style>
<style lang="scss" scoped="scoped">
	.lianghao {
		margin: 0;
		padding: 0;
		background: #EFEFEF;

		/deep/ .el-button--primary {
			background-color: #EEF7FF;
			color: #fff;
			border: 0;
			margin: 0 10px;
		}

		/deep/ .el-table__header th {
			background: #EAEAEA;
		}

		.flex {
			display: flex;
		}

		.center {
			width: 1366px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.right {
				flex-basis: 1166px;
				background: #FFF;

				.title {
					border-bottom: 1px #EAEAEA solid;
					line-height: 45px;
					padding-left: 30px;
					font-size: 16px;
					background: #F9F9F9;
					color: #727272
				}

				.add {
					padding: 20px 30px
				}

				.list {
					display: flex;
					text-align: center;
					color: #727272;
					line-height: 45px;
					margin: 0 20px;
					border: 1px #EAEAEA solid;
					margin-top: -1px;

					.th {
						flex: 1;
						background: #F9F9F9;
						font-size: 14px;
						border-right: 1px #EAEAEA solid;
					}

					.td {
						flex: 1;
						font-size: 14px;
						border-right: 1px #EAEAEA solid;
					}
				}

				.el-pagination {
					text-align: right;
					margin: 20px 0
				}
			}
		}

		.result {
			margin-top: 20px;
		}
	}
</style>
